<div class="sub-page-wrapper">
    <div nz-row nzGutter='20'>
        <div nz-col nzFlex="300px 0 0" >
            <nz-card style="width:100%; min-height: 600px" nzTitle="个人中心" [nzLoading]="loadingState">
                <div class='upload-container'>
                    <app-image-upload-file
                        [fileList]='[avatar]'
                        [uploadPath]='baseUrl+"/system/user/profile/avatar"'
                        (fileListChange)='onAvatarChange($event)'
                    ></app-image-upload-file>
                </div>
                <div nz-row nzGutter="24" style='line-height: 40px'>
                    <div nz-col nzSpan="10" class='title'>用户名称：</div>
                    <div nz-col nzSpan="14" class='value'>{{entity.userName}}</div>
                    <div nz-col nzSpan="12">手机号码：</div>
                    <div nz-col nzSpan="12" class='value'>{{entity.phonenumber}}</div>
                    <div nz-col nzSpan="12">用户邮箱：</div>
                    <div nz-col nzSpan="12" class='value'>{{entity.email}}</div>
                    <div nz-col nzSpan="12">所属部门：</div>
                    <div nz-col nzSpan="12" class='value'>{{entity.dept.deptName}}/{{entity.postGroup}}</div>
                    <div nz-col nzSpan="12">所属角色：</div>
                    <div nz-col nzSpan="12" class='value'>{{entity.roleGroup}}</div>
                    <div nz-col nzSpan="10">创建时间：</div>
                    <div nz-col nzSpan="14" class='value'>{{entity.createTime}}</div>
                </div>
            </nz-card>
        </div>
        <div nz-col nzFlex="800px 1 0" >
            <nz-card style="width:100%; min-height: 600px" nzTitle="基本资料" [nzLoading]="loadingState">
                <nz-tabset>
                    <nz-tab nzTitle="基本资料">
                        <form nz-form [formGroup]="dataForm" nzLayout="vertical">
                            <div nz-row [nzGutter]="24">
                                <div nz-col nzSpan="24">
                                    <nz-form-item>
                                        <nz-form-label nzRequired>用户昵称</nz-form-label>
                                        <nz-form-control [nzErrorTip]="errorNameTpl">
                                            <input nz-input [(ngModel)]="entity.nickName" formControlName="nickName" placeholder="请输入10个字符以内的真实姓名" />
                                            <ng-template #errorNameTpl let-control>
                                                <ng-container *ngIf="control.hasError('required')">用户昵称不能为空</ng-container>
                                                <ng-container *ngIf="control.hasError('maxlength')">用户昵称不能超过10字符</ng-container>
                                            </ng-template>
                                        </nz-form-control>
                                    </nz-form-item>
                                </div>


                                <div nz-col nzSpan="24" >
                                    <nz-form-item>
                                        <nz-form-label nzRequired>手机号</nz-form-label>
                                        <nz-form-control [nzErrorTip]="errorPhoneTpl">
                                            <input nz-input [(ngModel)]="entity.phonenumber" formControlName="phonenumber" placeholder="请输入手机号" />
                                            <ng-template #errorPhoneTpl let-control>
                                                <ng-container *ngIf="control.hasError('required')">手机号不能为空</ng-container>
                                                <ng-container *ngIf="control.hasError('mobile')">请输入正确的手机号</ng-container>
                                            </ng-template>
                                        </nz-form-control>
                                    </nz-form-item>
                                </div>

                                <div nz-col nzSpan="24">
                                    <nz-form-item>
                                        <nz-form-label nzRequired>邮箱</nz-form-label>
                                        <nz-form-control [nzErrorTip]="errorEmailTpl">
                                            <input nz-input [(ngModel)]="entity.email" formControlName="email" placeholder="请输入邮箱号" />
                                            <ng-template #errorEmailTpl let-control>
                                                <ng-container *ngIf="control.hasError('required')">邮箱号不能为空</ng-container>
                                                <ng-container *ngIf="control.hasError('email')">请输入正确的邮箱</ng-container>
                                            </ng-template>
                                        </nz-form-control>
                                    </nz-form-item>
                                </div>


                                <div nz-col nzSpan="24">
                                    <nz-form-item>
                                        <nz-form-label>用户性别</nz-form-label>
                                        <nz-form-control>
                                            <app-dict-select  [dictKey]='"sys_user_sex"' [dictPlaceholder]='"用户性别"' [(selectKey)]='entity.sex'></app-dict-select>
                                        </nz-form-control>
                                    </nz-form-item>
                                </div>
                            </div>
                        </form>
                        <button nz-button nzType="primary" [disabled]="dataForm.invalid" [nzLoading]="saveLoadingState" (click)="onSave()">
                            保存
                        </button>
                    </nz-tab>
                    <nz-tab nzTitle="修改密码">
                        <form nz-form [formGroup]="pwdDataForm" nzLayout="vertical">
                            <div nz-row [nzGutter]="24">
                                <div nz-col nzSpan="24">
                                    <nz-form-item>
                                        <nz-form-label >旧密码</nz-form-label>
                                        <ng-template #suffix1Template>
                                            <i nz-icon [nzType]="pwdEntity.oldPassword.visible ? 'eye-invisible' : 'eye'" (click)='revertValue("1")'></i>
                                        </ng-template>
                                        <nz-form-control [nzErrorTip]="errorPasswordTpl">
                                            <nz-input-group [nzSuffix]="suffix1Template">
                                                <input
                                                    nz-input
                                                    autocomplete="off"
                                                    [(ngModel)]="pwdEntity.oldPassword.value"
                                                    formControlName="oldPassword"
                                                    [placeholder]="entity.userId === '' ? '请输入6-18个字符以内的登录密码' : '不修改留空即可'"
                                                    [type]="pwdEntity.oldPassword.visible ? 'text' : 'password'"
                                                />
                                            </nz-input-group>
                                        </nz-form-control>
                                    </nz-form-item>
                                </div>
                                <div nz-col nzSpan="24" >
                                    <nz-form-item>
                                        <nz-form-label >新密码</nz-form-label>
                                        <ng-template #suffix2Template>
                                            <i nz-icon [nzType]="pwdEntity.newPassword.visible ? 'eye-invisible' : 'eye'" (click)="revertValue('2')"></i>
                                        </ng-template>
                                        <nz-form-control [nzErrorTip]="errorPasswordTpl">
                                            <nz-input-group [nzSuffix]="suffix2Template">
                                                <input
                                                    nz-input
                                                    autocomplete="off"
                                                    [(ngModel)]="pwdEntity.newPassword.value"
                                                    formControlName="newPassword"
                                                    [placeholder]="entity.userId === '' ? '请输入6-18个字符以内的登录密码' : '不修改留空即可'"
                                                    [type]="pwdEntity.newPassword.visible ? 'text' : 'password'"
                                                />
                                            </nz-input-group>
                                        </nz-form-control>
                                    </nz-form-item>
                                </div>
                                <div nz-col nzSpan="24" >
                                    <nz-form-item>
                                        <nz-form-label >确认密码</nz-form-label>
                                        <ng-template #suffix3Template>
                                            <i nz-icon [nzType]="pwdEntity.confirmPassword.visible ? 'eye-invisible' : 'eye'" (click)="revertValue('3')"></i>
                                        </ng-template>
                                        <nz-form-control [nzErrorTip]="errorPasswordTpl">
                                            <nz-input-group [nzSuffix]="suffix3Template">
                                                <input
                                                    nz-input
                                                    autocomplete="off"
                                                    [(ngModel)]="pwdEntity.confirmPassword.value"
                                                    formControlName="confirmPassword"
                                                    [placeholder]="entity.userId === '' ? '请输入6-18个字符以内的登录密码' : '不修改留空即可'"
                                                    [type]="pwdEntity.confirmPassword.visible ? 'text' : 'password'"
                                                />
                                            </nz-input-group>
                                        </nz-form-control>
                                    </nz-form-item>
                                </div>
                            </div>
                        </form>
                        <ng-template #errorPasswordTpl let-control>
                            <ng-container *ngIf="control.hasError('required')">密码不能为空<br/></ng-container>
                            <ng-container *ngIf="control.hasError('minlength')">密码字符不能少于6个</ng-container>
                            <ng-container *ngIf="control.hasError('maxlength')">密码字符不能超过18个</ng-container>
                            <ng-container *ngIf="control.hasError('match')">两次输入的密码不一致</ng-container>
                        </ng-template>
                        <button nz-button nzType="primary" [disabled]="pwdDataForm.invalid" [nzLoading]="saveLoadingState" (click)="onPwdSave()">
                            保存
                        </button>
                    </nz-tab>
                </nz-tabset>
            </nz-card>
        </div>
    </div>
</div>

